<template>
  <div>
    <el-alert close-text="Get!" style="margin-bottom: 10px" type="info">
      <div>1、双击表格行，可以恢复对应数据。</div>
    </el-alert>
    <el-table v-loading="listLoading" :data="list" border element-loading-text="Loading" fit height="200px" highlight-current-row size="mini" @row-dblclick="dblclickRow">
      <el-table-column align="center" label="ID" prop="id" width="80">
        <template v-slot="{row}">
          {{ row.id }}
        </template>
      </el-table-column>
      <el-table-column label="接口名称" prop="name">
        <template v-slot="{row}">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="更改于" prop="name" width="200px">
        <template v-slot="{row}">
          {{ row.createdAt | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="更改由" prop="name" width="120px">
        <template v-slot="{row}">
          {{ row.historyDesigner }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { deepClone } from '@/utils'
import { selectByApiId } from '@/api/functional_test/test_data_manage/api_history'

export default {
  props: {
  },
  data() {
    return {
      caseType: null,
      readonly: true,
      value: {
        type: Object,
        default() {
          return {
            catalogId: 0, // 分类 id
            textMode: false // 文本模式编辑
          }
        }
      },
      listLoading: false, // 列表加载状态
      list: [], // 列表数据
      clickTime: null // 单击计时器（为了避免双击时会触发两次单击问题）
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 装载数据
    loadData(apiId) {
      this.listLoading = true
      selectByApiId({
        projectId: this.$store.getters.projectId,
        apiId: apiId
      }).then(response => {
        this.list = response.data
        this.listLoading = false
        this.caseType = null
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 双击 表格行
    dblclickRow(row) {
      this.$emit('dblclickResultRow', this.historyToElement(row))
    },
    // 将 history 数据转换成 element 数据
    historyToElement(row) {
      const element = deepClone(row) // 深拷贝 row

      element.id = element.apiId
      element.apiParams = element.apiParamHistories
      delete element.apiId
      delete element.historyDesigner
      delete element.apiParamHistories

      for (const apiParam of element.apiParams) {
        apiParam.id = apiParam.apiParamId
        delete apiParam.apiParamId
        delete apiParam.apiHistoryId
      }

      return element
    }
  }
}
</script>
